<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<p ref="fixedBox" class="fixed-top"><Back></Back>交易详情</p>
		</header>

		<!-- 交易信息部分 -->
		<div class="transaction-detail" v-if="transaction">
			<div class="transaction-status" :class="getStatusClass()">
				<p class="status-amount">¥{{ transaction.transactionAmount }}</p>
				<p class="status-text">{{ getStatusText() }}</p>
			</div>

			<div class="transaction-info-card">
				<div class="info-item">
					<span class="label">交易类型</span>
					<span class="value">{{ getTransactionTypeName() }}</span>
				</div>
				<div class="info-item">
					<span class="label">交易时间</span>
					<span class="value">{{ formatTime(transaction.createTime) }}</span>
				</div>
				<div class="info-item">
					<span class="label">交易流水号</span>
					<span class="value">{{ transaction.transferId }}</span>
				</div>
				<div class="info-item" v-if="transaction.fromWalletId && transaction.toWalletId">
					<span class="label">{{ isIncome() ? '付款方' : '收款方' }}</span>
					<span class="value">{{ isIncome() ? getFromUserName() : getToUserName() }}</span>
				</div>
				<div class="info-item">
					<span class="label">交易状态</span>
					<span class="value">{{ getTransactionStatusName() }}</span>
				</div>
				<div class="info-item" v-if="!isIncome() && transaction.fromWalletId && transaction.toWalletId && !transaction.isConfirmed">
					<span class="label">到账时间</span>
					<span class="value">交易确认后到账</span>
				</div>
			</div>

			<!-- 订单确认按钮 -->
			<div class="action-buttons" v-if="showConfirmButton">
				<button @click="confirmTransaction" class="btn-confirm">确认收货</button>
			</div>
		</div>

		<!-- 加载中 -->
		<div class="loading" v-else-if="loading">
			<p>加载中...</p>
		</div>

		<!-- 交易不存在 -->
		<div class="not-found" v-else>
			<p>未找到交易信息</p>
			<button @click="goBack" class="btn-back">返回</button>
		</div>

		<!-- 底部菜单部分 -->
		<Footer></Footer>
	</div>
</template>

<script>
	import Footer from '../components/Footer.vue';
	import Back from '../components/Back.vue';
	
	export default {
		name: 'TransactionDetail',
		components: {
			Footer,
			Back
		},
		data() {
			return {
				transactionId: this.$route.query.transactionId,
				user: null,
				walletId: null,
				transaction: null,
				loading: true,
				fromUser: null,
				toUser: null
			}
		},
		computed: {
			showConfirmButton() {
				// 如果是收款方，并且交易状态是待确认
				return this.transaction && 
					this.transaction.toWalletId === this.walletId && 
					this.transaction.isConfirmed === 0 &&
					this.transaction.fromWalletId && this.transaction.toWalletId; // 确保是正常的交易，非充值或提现
			}
		},
		created() {
			this.user = this.$getSessionStorage('user');
			if (this.user) {
				this.walletId = this.user.userId;
				this.getTransactionDetail();
			}
		},
		methods: {
			// 获取交易详情
			getTransactionDetail() {
				// 这里使用交易记录列表数据，实际项目中可以添加获取单个交易详情的接口
				this.$axios.get(`WalletController/listTransactionByWalletId/${this.walletId}`)
					.then(response => {
						if (response.data.code === 200) {
							const transactions = response.data.result || [];
							// 查找指定ID的交易
							this.transaction = transactions.find(item => item.transferId == this.transactionId);
							console.log('找到的交易详情:', this.transaction);
							
							// 如果找到交易，获取相关用户信息
							if (this.transaction) {
								this.getUserInfo();
							}
						}
						this.loading = false;
					})
					.catch(error => {
						console.error('获取交易记录失败', error);
						this.loading = false;
					});
			},
			
			// 获取交易相关用户信息
			getUserInfo() {
				// 获取付款方信息
				if (this.transaction.fromWalletId && this.transaction.fromWalletId !== this.walletId) {
					this.$axios.get(`UserController/getUserById/${this.transaction.fromWalletId}`)
						.then(response => {
							if (response.data.code === 200) {
								this.fromUser = response.data.result;
							}
						})
						.catch(error => {
							console.error('获取付款方信息失败', error);
						});
				}
				
				// 获取收款方信息
				if (this.transaction.toWalletId && this.transaction.toWalletId !== this.walletId) {
					this.$axios.get(`UserController/getUserById/${this.transaction.toWalletId}`)
						.then(response => {
							if (response.data.code === 200) {
								this.toUser = response.data.result;
							}
						})
						.catch(error => {
							console.error('获取收款方信息失败', error);
						});
				}
			},
			
			// 确认交易
			confirmTransaction() {
				if (!this.transaction || !this.transaction.transferId) {
					alert('无法确认交易，交易信息不完整');
					return;
				}
				
				this.$axios.post(`WalletController/confirmTransaction/${this.transaction.transferId}`)
					.then(response => {
						if (response.data.code === 200) {
							alert('交易确认成功');
							// 刷新交易信息
							this.getTransactionDetail();
						} else {
							alert('交易确认失败: ' + response.data.message);
						}
					})
					.catch(error => {
						console.error('确认交易失败', error);
						alert('确认交易失败，请稍后重试');
					});
			},
			
			// 判断是否为收入
			isIncome() {
				return this.transaction && this.transaction.toWalletId === this.walletId;
			},
			
			// 获取状态样式类
			getStatusClass() {
				if (!this.transaction) return '';
				
				if (this.isIncome()) {
					return 'status-income';
				} else {
					return 'status-expense';
				}
			},
			
			// 获取状态文本
			getStatusText() {
				if (!this.transaction) return '';
				
				// 根据fromWalletId和toWalletId判断交易类型
				// 如果没有from，只有to，说明是充值
				if (!this.transaction.fromWalletId && this.transaction.toWalletId) {
					return '充值';
				}
				// 如果有from，没有to，说明是提现
				else if (this.transaction.fromWalletId && !this.transaction.toWalletId) {
					return '提现';
				} else if (this.isIncome()) {
					return '收入';
				} else {
					return '支出';
				}
			},
			
			// 获取交易类型名称
			getTransactionTypeName() {
				if (!this.transaction) return '';
				
				// 根据fromWalletId和toWalletId判断交易类型
				// 如果没有from，只有to，说明是充值
				if (!this.transaction.fromWalletId && this.transaction.toWalletId) {
					return '钱包充值';
				}
				// 如果有from，没有to，说明是提现
				else if (this.transaction.fromWalletId && !this.transaction.toWalletId) {
					return '钱包提现';
				}
				// 一般交易
				else if (this.transaction.fromWalletId && this.transaction.toWalletId) {
					return '交易';
				} else {
					return '未知类型';
				}
			},
			
			// 获取交易状态名称
			getTransactionStatusName() {
				if (!this.transaction) return '';
				
				// 根据isConfirmed字段判断状态
				if (this.transaction.isConfirmed === 0) {
					return '待确认';
				} else if (this.transaction.isConfirmed === 1) {
					return '已完成';
				} else {
					return '未知状态';
				}
			},
			
			// 获取付款方用户名
			getFromUserName() {
				if (this.fromUser) {
					return this.fromUser.userName || '未知用户';
				}
				return '未知用户';
			},
			
			// 获取收款方用户名
			getToUserName() {
				if (this.toUser) {
					return this.toUser.userName || '未知用户';
				}
				return '未知用户';
			},
			
			// 格式化时间
			formatTime(time) {
				if (!time) return '';
				const date = new Date(time);
				return `${date.getFullYear()}-${this.padZero(date.getMonth() + 1)}-${this.padZero(date.getDate())} ${this.padZero(date.getHours())}:${this.padZero(date.getMinutes())}:${this.padZero(date.getSeconds())}`;
			},
			
			padZero(num) {
				return num < 10 ? `0${num}` : num;
			},
			
			// 返回上一页
			goBack() {
				this.$router.go(-1);
			}
		}
	}
</script>

<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;

		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;

		display: flex;
		justify-content: center;
		align-items: center;
	}
	.wrapper header .fixed-top {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;
		
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.wrapper header Back {
		margin-left: 2.5vw;
	}

	/****************** 交易详情部分 ******************/
	.transaction-detail {
		margin-top: 16vw;
		padding-bottom: 15vw;
	}

	.transaction-status {
		padding: 6vw 4vw;
		text-align: center;
	}

	.status-income {
		background-color: #38CA73;
		color: #fff;
	}

	.status-expense {
		background-color: #FF5252;
		color: #fff;
	}

	.status-amount {
		font-size: 8vw;
		font-weight: bold;
		margin-bottom: 2vw;
	}

	.status-text {
		font-size: 4vw;
	}

	.transaction-info-card {
		background-color: #fff;
		margin: 4vw;
		border-radius: 8px;
		padding: 3vw;
		box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		padding: 3vw 2vw;
		border-bottom: 1px solid #f0f0f0;
	}

	.info-item:last-child {
		border-bottom: none;
	}

	.label {
		color: #999;
		font-size: 3.8vw;
	}

	.value {
		color: #333;
		font-size: 3.8vw;
		font-weight: 500;
	}
	
	/****************** 按钮部分 ******************/
	.action-buttons {
		margin: 6vw 4vw;
	}
	
	.btn-confirm {
		width: 100%;
		background-color: #38CA73;
		color: #fff;
		border: none;
		border-radius: 4px;
		padding: 3vw;
		font-size: 4vw;
	}
	
	.btn-back {
		background-color: #0097FF;
		color: #fff;
		border: none;
		border-radius: 4px;
		padding: 2.5vw 5vw;
		margin-top: 3vw;
		font-size: 4vw;
	}
	
	/****************** 加载中和未找到部分 ******************/
	.loading, .not-found {
		margin-top: 30vw;
		text-align: center;
		color: #999;
		font-size: 4vw;
	}
	
	.not-found p {
		margin-bottom: 5vw;
	}
</style> 